<template>
	<div>子级页面的文字</div>
		<div>
			<div> 
			<div>我演示接收进来的数据</div>
			<div class="pt20">
				{{faterobj.name}} || {{faterobj.num}}
			</div>
		</div>
		
		<div class="p10"> </div>
		<el-button type="primary" round @click="chages">点击传递数据</el-button>
		<div class="p10"> </div>
		  <el-button type="primary" :icon="Edit" circle  @click="happy(faterobj)" />
		  
		<div class="p10"> </div>
		<div>插槽内容 </div>
		<div class="p10"> </div>
		<div>普通插槽 我注释掉了 和以前一样 </div>
		
		<!-- <div class="p10"> </div> -->
		<!-- <slot></slot> -->
		
		<div class="p10"> </div>
		<div>具名插槽 </div>
		<slot name="logs"></slot>
		<div class="p10"> </div>
		
		<div>作用域插槽 </div>
		<div v-for="item in list" :key="item.age">
			<slot :data="item"></slot>
		</div>
		
	</div>

</template>

<script setup>
import { reactive, ref } from 'vue';
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
	defineProps({
		faterobj:{
			type:Object,
			default:{}
		}
	})
	// 要传出去的
	const emit = defineEmits(['chages','happy'])
	let sonnum = ref(123456789)
	
	
	let list = reactive([
		{
			name:'f',
			age:18
		},
		{
			name:'l',
			age:22
		}
	])
	
	let chages = ()=>{
		emit('chages',sonnum)
	}
	let happy = (faterobjs)=>{
		emit('happy',faterobjs.num)
	}
</script>

<style scoped>
</style>